<template>
	<view class="container">
		<!-- Order -->
		<view class="subsite">
			<view class="flex-center mb30"><uni-icons :type="status" size="42" :color="color" class="mr10"></uni-icons><view class="fz28">{{getStatus(data.status)}}</view></view>
			<view class="subsite-heading">
				<view class="section-main-title fz18"><text>//</text>预约单<text>//</text></view>
				<view class="c-gray mt10">单号：<text class="bold">{{data.order_sn}}</text></view>
			</view>
			<view class="subsite-row">
				<view class="chart-box">
					<view class="order-box">
						<navigator url="" hover-class="none" class="flex-column flex-center">
							<view class="pro-card-img">
								<image :src="data.thumb" mode="aspectFill"></image>
							</view>
							<view class="tc">
								<view class="section-main-title fz16">屋顶防水补漏</view>
							<view class="mt10"><text class="price-value">&yen;{{parseFloat(data.final_price)?data.final_price:(parseFloat(data.region_price)?data.region_price:data.price)}}</text></view>
							</view>
						</navigator>
					</view>
					<view class="order-box-detai">
						<view class="order-item">
							<view class="uni-flex">
							<label><uni-icons type="person-filled" size="14" color="#a4a4a4" class="mr10"></uni-icons>客户姓名：</label>
							<view class="uni-flex-item"><text>{{data.name}}</text></view>
							</view>
						</view>
						<view class="order-item">
							<view class="uni-flex">
							<label><uni-icons type="phone-filled" size="14" color="#a4a4a4" class="mr10"></uni-icons>联系电话：</label>
							<view class="uni-flex-item"><text>{{data.phone}}</text></view>
							</view>
						</view>
						<view class="order-item">
							<view class="uni-flex">
							<label><uni-icons type="location-filled" size="14" color="#a4a4a4" class="mr10"></uni-icons>联系地址：</label>
							<view class="uni-flex-item"><text>{{data.address}}</text></view>
							</view>
						</view>
						<view class="order-item">
							<view class="uni-flex">
							<label><uni-icons type="home-filled" size="14" color="#a4a4a4" class="mr10"></uni-icons>上门时间：</label>
							<view class="uni-flex-item"><text>{{ formatTime( data.appointment_time,3)}}</text></view>
							</view>
						</view>
						<view class="order-item">
							<view class="uni-flex">
							<label><uni-icons type="chat-filled" size="14" color="#a4a4a4" class="mr10"></uni-icons>需求描述：</label>
							<view class="uni-flex-item">
								<text>
									{{data.remark}}
								</text>
							</view>
							</view>
						</view>
						<button v-if="data.status==1" @click="reload_pay">重新支付</button>
					</view>
				</view>	
			</view>
		    
				
			
		</view>
		<!-- Order end-->
		<!-- Footer -->
		<relation></relation>
		<!-- Footer end-->
	</view>
</template>

<script>
	import relation from'../public/relation.vue';
	import base from '../../js/base.js';
	import app from '../../js/app.js';
	export default {
		components:{
			relation
		},
		data() {
			return { 
				status:'checkbox-filled',
				color:'#00b700',
				data:{}
			};
		},
		methods: {
			reload_pay(){
				let This =this;
				base.request({
					url:base.urltext('/itorder/user_port/reload_pay'),
					header:{ 'content-type': 'application/x-www-form-urlencoded','authorization':app.g.session_key},
					data:{order_sn:This.data.order_sn},
					success:function(res){
						if(res.data.success>0)
						{
							let v_data = res.data.list;
							uni.requestPayment({
								timeStamp: v_data.timeStamp,
								nonceStr: v_data.nonceStr,
								package: v_data.package,
								signType: 'MD5',
								paySign: v_data.paySign,
								success(res) {
									uni.hideLoading();
									uni.showToast({title:'支付成功',icon:'success'});
									This.status = 2;
									base.request({
										url:base.urltext('/itorder/user_port/order_details'),
										header:{ 'content-type': 'application/x-www-form-urlencoded','authorization':app.g.session_key},
										data:{order_sn:This.data.order_sn},
										success:function(res){
											if(res.data.success>0)
											{
												This.data = res.data.list;
												if(This.data.status==5)
												{
													This.status = 'clear';
													This.color='#e6e6e6';
												}
												
												
											}
										}
									});
								},
								fail(res) {
									console.log(res);
									uni.showToast({title:'支付失败，在订单详情重试',icon:'none'});
								}
							})
							//uni.showToast({title:'预约成功',icon:'success'});
						}else{
							uni.showToast({title:res.data.msg,icon:'error'});
						}
					}
				});
			},
			formatTime:function(e,b=1){
				return base.formatTime(e,b);
			},
			getStatus(e)
			{
				switch(e)
				{
					case '1':
						return '待支付';
					case '2':
						return '已支付';
					case '3':
						return '已派人';
					case '4':
						return '已完成';
					case '5':
						return '已取消';
						
				}
				return '服务错误';
			}
		},	
		onLoad(opt) {
			let This = this;
			base.request({
				url:base.urltext('/itorder/user_port/order_details'),
				header:{ 'content-type': 'application/x-www-form-urlencoded','authorization':app.g.session_key},
				data:{order_sn:opt.order_id},
				success:function(res){
					if(res.data.success>0)
					{
						This.data = res.data.list;
						if(This.data.status==5)
						{
							This.status = 'clear';
							This.color='#e6e6e6';
						}
						
						
					}
				}
			});
			
		},
	}
</script>

<style>
	
</style>
